
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="Keywords" content="ulinksdk demo">
    <meta name="Description" content="ulinksdk demo">
    <title>ulinksdk demo</title>
    <script src="//ossweb-img.qq.com/images/js/PTT/ping_tcss_tgideas_https_min.js"></script>
    <script>
        //此段代码不能放到外链JS中，
        var setSite = { //设置网站属性
            siteType: "ulinksdk", //必填项:"os"代表是官网，如果不是，则填写actName例如a20160701xxx
            pageType: "index", //必填项:本页面的定位；按照页面含义填写例如main||list||detail||download||share||page1||pageN
            pageName: "首页" //必填项:页面中文名
        }
        if (typeof (pgvMain) == 'function') pgvMain();//千万不能忘记！
    </script>
    <script src="https://game.gtimg.cn/images/ulink/ulinksdk/vconsole.min.js"></script>
    <script>
        var vConsole = new VConsole();
    </script>
</head>
<!-- dialog -->
<style>
    .pop_award {
        position: relative;
        width: 300px;
        box-sizing: border-box;
        padding: 35px;
        border: 1px solid #c7b68b;
        background-color: #162a56;
        display: none;
    }
    .pop_close {
        position: absolute;
        width: 68px;
        height: 79px;
        right: -5px;
        top: -5px;
        z-index: 2;
    }
    .sp {
        background: url(//game.gtimg.cn/images/ulink/act/1837/a20191031cffield/sp.png) no-repeat;
        background-position: 0 -279px;
    }
    .db {
        display: block;
        text-indent: -999em;
    }
    .p_tit {
        color: #f9e198;
        font-weight: bold;
        text-align: center;
        line-break: 45px;
    }
    .p_tit i {
        display: inline-block;
        width: 50px;
        height: 2px;
        background-position: -91px -311px;
        vertical-align: middle;
        margin: 0 10px;
    }
    .tab_award {
        width: 100%;
        box-sizing: border-box;
        background-color: #152c54;
        border: 1px solid #f8e0aa;
        margin-top: 25px;
        box-shadow: 0 0 196px #123c86 inset;
    }

    .tab_award thead th {
        height: 44px;
        background-color: #f6bf72;
        color: #513816;
        font-size: 20px;
        text-align: center;
    }

    .tab_award tbody td {
        color: #ffffff;
        font-size: 16px;
        line-height: 24px;
        box-sizing: border-box;
        padding: 15px 10px;
        text-align: center;
    }

</style>

<!-- 自定义角色选择 -->
<style>
    /* 自定义皮肤时，请务必保证先复制粘贴如下样式，然后再修改 */
    #roleSelector {
        display: none;
    }
    .ulink-layer {
        position: absolute;
        z-index: 9998;
        left: 0;
        right: 0;
        top: 0;
        bottom:0;
        opacity: 0.7;
        background-color: #888a8c;
    }
    .ulink-dialog {
        position: fixed;
        z-index: 9999;
        left: 50%;
        top: 50%;
        margin-top: -60.5px;
        margin-left: -210px;
        border-radius: 5px;
        overflow: hidden;
    }
    .ulink-dialog::before {
        content: '';
        display: block;
        height: 61px;
        background-image: url(//game.gtimg.cn/images/yxzj/cp/a20181128word/image/bg_float_element.png);
        background-position: -0.5px -88px;
        background-repeat: no-repeat;
        background-size: 500px auto;
    }
    .ulink-dialog .header {
        height: 20px;
        padding-top: 5px;
        line-height: 20px;
        color: #fff;
        text-align: center;
        background: url(//game.gtimg.cn/images/yxzj/cp/a20181128word/image/bg_float_boder_mid.png) repeat;
        background-size: 422px auto;
    }
    .ulink-dialog .header .title {
        font-size: 14px;
    }
    .ulink-dialog .close-btn {
        top: 30px;
        right: 54px;
        position: absolute;
        width: 36px;
        height: 40px;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        cursor: pointer;
        background-image: url(//game.gtimg.cn/images/yxzj/cp/a20181128word/image/bg_float_element.png);
        background-position: -413px -385px;
        background-repeat: no-repeat;
        background-size: 500px auto;
        transform: scale(0.8);
    }
    .ulink-dialog .content {
        position: relative;
        font: normal 12px Tahoma,"宋体";
        color: #222222;

        width: 235px;
        padding: 8px 93px;
        background: url(//game.gtimg.cn/images/yxzj/cp/a20181128word/image/bg_float_boder_mid.png) repeat;
        background-size: 422px auto;
    }
    .ulink-dialog::after {
        content: '';
        display: block;
        height: 32px;
        background-image: url(//game.gtimg.cn/images/yxzj/cp/a20181128word/image/bg_float_element.png);
        background-position: -0.5px -150.5px;
        background-repeat: no-repeat;
        background-size: 500px auto;
    }
    .ulink-dialog span {
        color: #fff;
    }
    .ulink-dialog .display-none {
        display: none;
    }
    .ulink-dialog select {
        height: 30px;
        width: 159px;
        margin: 10px auto 5px;
        color: #fff;
        background: #d4a32e;
    }
    .ulink-dialog select:first-child {
        margin-top: 5px;
    }
    .ulink-dialog .error-message {
        height: 25px;
        line-height: 25px;
        color: #FF0000;
        clear: both;
    }
    .ulink-dialog .button-box {
        position: relative;
        height: 30px;
        margin-bottom: 0px;
        padding-top: 5px;
    }
    .ulink-dialog .btn {
        position: absolute;
        width: 45%;
        height: 32px;
        padding: 0px;
        text-align: center;
        font-size: 14px;
        color: white;
        border: none;
        cursor: pointer;
    }
    .ulink-dialog .confirm-btn {
        left: 0px;
        background-image: url(//game.gtimg.cn/images/yxzj/cp/a20181128word/image/bg_float_element.png);
        background-position: -592px -200px;
        background-repeat: no-repeat;
        background-size: 700px auto;
    }
    .ulink-dialog .cancel-btn {
        right: 0px;
        background-image: url(//game.gtimg.cn/images/yxzj/cp/a20181128word/image/bg_float_element.png);
        background-position: -624px -245px;
        background-repeat: no-repeat;
        background-size: 740px auto;
    }
</style>

<!-- 自定义最近登录角色 -->
<style>
    /*最近登录角色自定义皮肤时，请务必保证先复制粘贴如下样式，然后再修改*/
    #rencentRole{
        display: none;
    }
    .ulink-dialog .ulink-role-list {
        padding: 10px;
        text-align: center;
    }
    .ulink-dialog .role-info{
        color: #fff;
        padding: 5px 0;
        border:  1px solid  #fff;
        border-radius: 5px;
        margin-bottom: 5px;
    }
    .ulink-dialog .role-info:active, .ulink-dialog .role-info:hover{
        border-color: #027bdc;
        color: #027bdc;
        cursor: pointer;
    }
    .ulink-dialog .change-btn {
        position: absolute;
        width: 45%;
        height: 32px;
        padding: 0px;
        text-align: center;
        font-size: 14px;
        border: none;
        color: #fff;
        cursor: pointer;
        left: 27.5%;
        background-color: #2196f3
    }
    .ulink-dialog .change-btn:active, .ulink-dialog .change-btn:hover {
        background-color: #027bdc;
    }
</style>


<body>
<div id="userAgent"></div>
<br><br>

<div>
    <button id="btnSelectRole">角色选择</button>
    <button id="btnSelectRole2" style="margin-left: 20px;">自定义皮肤角色选择</button>
    <div id="retmsg" style="overflow: auto; scroll-behavior: smooth;"></div>
</div>
<br><br>


<div>
    <button id="btnPersonInfo">填写实物信息</button>
</div>
<br><br>

<div>
    <button id="ptLogin">PT登录</button>&nbsp;&nbsp;&nbsp;&nbsp;
    <button id="qqLogin">QQ登录</button>&nbsp;&nbsp;&nbsp;&nbsp;
    <button id="wxLogin">微信登录</button>&nbsp;&nbsp;&nbsp;&nbsp;
    <button id="qqWxLogin">QQ微信联合登录</button>&nbsp;&nbsp;&nbsp;&nbsp;
    <button id="btnOpenQQ">打开手Q</button>&nbsp;&nbsp;&nbsp;&nbsp;
    <button id="loginOut" style="display:none;">注销</button>&nbsp;&nbsp;&nbsp;&nbsp;<span id="loginType"></span><span id="userName"></span>
</div>
<br><br>

<div>
    <button id="btn_alert">alert</button>&nbsp;&nbsp;&nbsp;&nbsp;
    <button id="btn_confirm">confirm</button>&nbsp;&nbsp;&nbsp;&nbsp;
    <button id="btn_dialog">dialog</button>&nbsp;&nbsp;&nbsp;&nbsp;
    <button id="btn_toast">toast</button>
</div>
<br><br>


<div>
    <span>一级选择：</span>
    <select id="test1"></select>
    <span style="margin-left: 20px;">二级选择：</span>
    <select id="test2"></select>
    <button id="relationSelector">确定</button>
    <div id="relationResult"></div>
</div>


<div class="pop pop_award" id="pop_award">
    <a href="javascript:ulink.Dialog.hide()" class="pop_close sp db"></a>
    <h2 class="p_tit"><i class="sp"></i>礼包记录<i class="sp"></i></h2>
    <table class="tab_award">
        <thead>
        <tr>
            <th>获取时间</th>
            <th>获取大区</th>
            <th>获取道具</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
<div class="pop pop_award" id="pop_award1">
    <a href="javascript:ulink.Dialog.hide()" class="pop_close sp db"></a>
    <h2 class="p_tit"><i class="sp"></i>礼包记录1<i class="sp"></i></h2>
    <table class="tab_award">
        <thead>
        <tr>
            <th>获取时间1</th>
            <th>获取大区1</th>
            <th>获取道具1</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

<!-- 自定义皮肤时，请务必保证先复制粘贴以下DOM，然后再修改 -->
<div id="roleSelector">
    <div class="ulink-layer" ></div>
    <div class="ulink-dialog">
        <div class="header">
            <div class="title">请选择大区</div>
            <div class="close-btn" id="ulinkCloseBtn"></div>
        </div>
        <div class="content">
            <span>请选择渠道：</span>
            <select id="ulinkChannelSelect"> <!-- select标签不能替换为其它标签 -->
                <option value="">请选择渠道</option>
            </select>
            <select id="ulinkSystemSelect"> <!-- select标签不能替换为其它标签 -->
                <option value="">请选择系统</option>
            </select>
            <span>请选择大区：</span>
            <select id="ulinkAreaSelect"> <!-- select标签不能替换为其它标签 -->
                <option value="">请选择大区</option>
            </select>
            <select id="ulinkServerSelect"> <!-- select标签不能替换为其它标签 -->
                <option value="">请选择服务器</option>
            </select>
            <div class="display-none" id="ulinkRoleSelectParent">
                <span>请选择角色：</span>
                <select id="ulinkRoleSelect"></select> <!-- select标签不能替换为其它标签 -->
            </div>
            <div class="error-message display-none" id="ulinkErrorMessage"></div>
            <div class="button-box">
                <div class="btn confirm-btn" id="ulinkConfirmBtn"></div>
                <div class="btn cancel-btn" id="ulinkCancelBtn"></div>
            </div>
        </div>
    </div>
</div>

<!-- 最近登录角色自定义皮肤时，请务必保证先复制粘贴以下DOM，然后再修改 -->
<div id="rencentRole">
    <div class="ulink-layer" ></div>
    <div class="ulink-dialog">
        <div class="header">
            <div class="title">最近登录角色</div>
            <div class="close-btn" id="ulinkCloseBtn"></div>
        </div>
        <div class="content">
            <div class="ulink-role-list" id="ulinkRecentRoleList">
                <!-- 最近登录角色列表，使用的是div标签，class="role-info", 可自行设置样式，示例如下： -->
                <div class="role-info">微信33区轮回不灭 我是测试号1</div>
                <div class="role-info">微信32区暗夜贵族 我是测试号2</div>
            </div>
            <div class="button-box">
                <button class="change-btn" id="ulinkChangeBtn">选择其他角色</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>

<script type="text/javascript" src="../js/ulink.2.0.5.js"></script>
<!-- <script type="text/javascript" src="../js/ulink.1.0.4.js"></script> -->


<script>
    document.getElementById("userAgent").innerHTML = navigator.userAgent;
    var $ = ulink.$;
    var getUrlParam = function(pa){var url=window.location.href.replace(/#+.*$/,""),params=url.substring(url.indexOf("?")+1,url.length).split("&"),param={};for(var i=0;i<params.length;i++){var pos=params[i].indexOf("="),key=params[i].substring(0,pos),val=params[i].substring(pos+1);param[key]=val}return typeof param[pa]=="undefined"?"":param[pa]};
    var sAppId = decodeURIComponent(getUrlParam("sAppId"));
    var iActId = decodeURIComponent(getUrlParam("iActId"));
    var sSign = decodeURIComponent(getUrlParam("sSign"));
    var game = decodeURIComponent(getUrlParam("game"));
    var bgColor = decodeURIComponent(getUrlParam("bgColor"));
    var timestamp = decodeURIComponent(getUrlParam("timestamp"));
    var sCode = decodeURIComponent(getUrlParam("sCode"));

    if (sAppId=="" || iActId=="" || sSign=="" || game=="" || timestamp=="" || sCode==""){
        document.getElementById("retmsg").innerHTML="缺少参数，请从<a href='http://ulink.qq.com/ulinkdebug/dist/html/index.html'>ULinkSDK 接口测试工具</a>生成链接再进入。"
    }

    var options = {
        "sAppId":sAppId ,  //腾讯优联APPID
        "iActId":iActId,   //活动ID
        "sSign":sSign,
        "game":game,
        "bgColor":bgColor,
        // "acctype":"qq",
        "timestamp":timestamp,
        "sCode":sCode,     // 斗鱼加密串
        // "filterSystems": ["苹果(iOS)"],
        // "getRecentRole": true,
    };

    function createRoleSelector(options) {
        var roleselector = new ulink.RoleSelector(options);
        //角色查询数据返回监听事件绑定
        roleselector.on("getRoleData", function (data) {
            console.log("getRoleData->", data);
            document.getElementById("retmsg").innerHTML = JSON.stringify(data);

        })
        roleselector.on("getRoleDataError", function (data) {
            console.log("error->", data);
        })
        // roleselector.on("renderAreaSuccess", function (data) {
        //     console.log("renderAreaSuccess->", data);
        //     roleselector.roleSelectChange("2", null, "2080", null);
        // })
        return roleselector;
    }

    //给按钮加上点击事件，显示角色查询弹出框
    document.getElementById("btnSelectRole").onclick=function(){
        if (!window.role1) {
            window.role1 = createRoleSelector(options);
        }
        window.role1.show();
    };
    document.getElementById("btnSelectRole2").onclick = function () {
        var options = {
            "sAppId": sAppId,  //腾讯优联APPID
            "iActId": iActId,   //活动ID
            "sSign": sSign,
            "game": game,
            "bgColor": bgColor,
            // "acctype": "qq",
            "timestamp": timestamp,
            "sCode": sCode,     // 斗鱼加密串
            custom: true,       // 角色选择器 DOM 及 CSS 自定义时，必须设置为true
            UISettings: {       // custom 值为 true 时以下属性必须设置
                dialog: $('#roleSelector'), // 角色选择器弹框
                channelSelect: $('#ulinkChannelSelect'), // 渠道下拉框
                systemSelect: $('#ulinkSystemSelect'),  // 系统下拉框
                areaSelect: $('#ulinkAreaSelect'),	// 大区下拉框
                serverSelect: $('#ulinkServerSelect'),	// 服务器下拉框
                roleSelect: $('#ulinkRoleSelect'),	// 角色下拉框
                roleSelectParent: $('#ulinkRoleSelectParent'), // 角色下拉框父节点
                errorMsgPanel: $('#ulinkErrorMessage'), // 错误信息展示面板
                confirmButton: $('#ulinkConfirmBtn'), // 确定按钮
                cancelButton: $('#ulinkCancelBtn'), // 取消按钮
                closeButton: $('#ulinkCloseBtn'), // 关闭按钮
                // 以下是自定义拉取最近登录信息的参数
                recentDialog: $('#rencentRole'), // 最近登录角色信息框
                recentRoleList: $('#ulinkRecentRoleList'), // 最近登录角色信息列表
                changeButton: $('#ulinkChangeBtn'), // 选择其他角色按钮

            },
            // "getRecentRole": true, //是否拉取最近登录信息
        }
        if (!window.role2) {
            window.role2 = createRoleSelector(options);
        }
        window.role2.show();
    };
</script>
<script>
    //登录部分测试
    var LoginManager = ulink.LoginManager.init({
        openLinkUrl:'https://game.weixin.qq.com/cgi-bin/comm/openlink?noticeid=90191671&appid=wx95a3a4d7c627e07d&url=https%3A%2F%2Fpvp.qq.com%2Fcp%2Fa20181119lixin%2Findex_wqg.htm#wechat_redirect',
        loginType: "all",
        // qqLoginType: "qc",
    });
    LoginManager.checkLogin(function(userInfo){
        ulink.$("#loginOut").css({
            display:'inline-block'
        });
        console.log(userInfo)
        console.log("已登录")
        document.getElementById("userName").innerHTML = userInfo.nickName;
        document.getElementById("loginType").innerHTML = (userInfo.loginType=='wx')?"微信：":"qq:";
    },function(){
        console.log("未登录")
        ulink.$("#loginOut").hide();
    });
    document.getElementById("ptLogin").onclick=function(){
        LoginManager.checkLogin(function(userInfo){
            alert("已登录");
        },function(){
            LoginManager.loginByPT();
        });
    };
    document.getElementById("qqLogin").onclick=function(){
        LoginManager.checkLogin(function(userInfo){
            alert("已登录");
        },function(){
            LoginManager.login();
        });
    };
    document.getElementById("wxLogin").onclick=function(){
        LoginManager.checkLogin(function(userInfo){
            console.log(userInfo)
            alert("已登录");
        },function(){
            console.log("未登录")
            LoginManager.loginByWx();
        });
    };
    document.getElementById("qqWxLogin").onclick=function(){
        LoginManager.checkLogin(function(userInfo){
            console.log(userInfo)
            alert("已登录");
        },function(){
            console.log("未登录")
            function isMobile() {
                return /iphone|ios|android|mini|mobile|mobi|Nokia|Symbian|iPod|iPad|Windows\s+Phone|MQQBrowser|wp7|wp8|UCBrowser7|UCWEB|360\s+Aphone\s+Browser|blackberry/i.test(navigator.userAgent);
            }
            if(!isMobile()){
                LoginManager.loginByWxAndQQ();
            }else{
                alert("移动端不可以联合登录");
            }
        });
    };

    document.getElementById("loginOut").onclick=function(){
        LoginManager.logout(function(){
            window.location.reload();
        });
    };
    document.getElementById("btnOpenQQ").onclick=function(){
        LoginManager.openLink();
    };


</script>
<script>
    $("#btn_alert").on("click",function(){
        ulink.alert("Hello Alert！！！",function(){
            alert("alert 回调");
        });
    });

    $("#btn_confirm").on("click",function(){
        ulink.confirm("Hello Confirm！！！",function(){
            alert("确定回调")
        },function(){
            alert("取消回调")
        });
    });

    $("#btn_dialog").on("click",function(){
        ulink.Dialog.show({
            el: "pop_award",
        })
    });

    $("#btn_toast").on("click",function(){
        ulink.toast("Hello Toast！！！");
    });

</script>


<script>
    ulink.http.get({
        url:'https://ulink.game.qq.com/admin/?c=User&a=getInfo',
        success:function(){
            console.log("请求成功");
        },
        error:function(){
            console.log("请求失败");
        }
    });
</script>


<script>
    var relationData = [
        {t:"手游", v:"0001", opt_data_array:
                [
                    {t:"王者荣耀", v:"0101"},
                    {t:"和平精英", v:"0102"},
                    {t:"天天酷跑", v:"0103"},
                ]
        },
        {t:"端游", v:"0002", opt_data_array:
                [
                    {t:"英雄联盟", v:"0201"},
                    {t:"穿越火线", v:"0202"},
                    {t:"火箭联盟", v:"0203"},
                ]
        }
    ];
    var relationResult = [];
    var RelationSelector = new ulink.RelationSelector({
        selectors:[
            {
                el:"#test1",//绑定的元素
                keyLabel:"t",//每一个item显示的key
                keyValue:"v",//每一个item值的key
                keySub:"opt_data_array"//function(item){},子级数据的key名
            },
            {
                el:"#test2",//绑定的元素
                keyLabel:"t",//每一个item显示的key
                keyValue:"v",//每一个item值的key
                keySub:""//function(item){}
            }
        ],
        // default:"",//默认填充在最前面的默认值，如果不需要，请置空
        onChange:function(result, index){//change函数，响应选择器的值变化
            console.log(result, index);
            relationResult = result;
        },
        data: relationData,//原始数据，array
        // initValue:["0001","0101"]//初始填充数据
    });
    $("#relationSelector").on("click",function(){
        $("#relationResult").html(JSON.stringify(relationResult));
        // RelationSelector.getLabelByValue(["0001", "0101"], function(data) {
        //     console.log(data);
        // })
    });
</script>


<!-- <script>
    var chatRoom = new ulink.ChatRoom({
        iActId: "1234",
        game: "ulink",
        acctype: "qq",  // qq、qc、wx
        openid: "",
        access_token: "",
        externRoomKey: "123",
    });

    chatRoom.connect();

    chatRoom.on("success", function() {
        // 聊天室连接成功回调
        console.log("聊天室连接成功");
    })
    chatRoom.on("message", function(data) {
        // 聊天室接受信息回调
        console.log(data);
    })

    setTimeout(function() {
        chatRoom.close();
    }, 12000)
</script> -->